<template>

<el-dialog :title="video.title" :visible.sync="visible" >
  <div v-for="(item,index) in video.pages" :key="index">  

    <el-link :type="linkType(item.status)" @click="toDownload(item.save_url)">
      <el-badge :value="badgeType(item.status)" class="item" style="right：0">
      {{ item.part }}  {{ item.duration | secToMin }}
      </el-badge>
    </el-link>

    <el-divider></el-divider>
  </div>


</el-dialog>

</template>


<script>
  const GET_VIDEO_DETAIL_URL = 'bilibili/get_video_detail';
  export default {
    data() {
      return {
        visible : false,
        formLabelWidth: '120px',
        video:{}
      }
  },
  methods:{
    initVideoDetail(){
      this.$fetch(GET_VIDEO_DETAIL_URL +'?id='+this.id).then(val => this.video = val);
    },
    linkType(status){
      switch(status){ 
        case this.DOWNLOAD_SUCCESS:
            return 'success'
        case this.DOWNLOAD_ING:
            return 'info'

        case this.DOWNLOAD_FAIL:
          return 'danger'
        case this.DOWNLOAD_Not:
          return 'warning'
      }
    },

      badgeType(status){
      switch(status){ 
        case this.DOWNLOAD_SUCCESS:
            return '下载完成'
        case this.DOWNLOAD_ING:
            return '下载中'

        case this.DOWNLOAD_FAIL:
          return '下载失败'
        case this.DOWNLOAD_Not:
          return '未下载'
      }
  },

  showDiaLog(){
    this.visible = !this.visible;
  },
  toDownload(href){
    if( href != null){
     window.open(href)
     return true;
    }
    this.$message.error('服务器可能还没有下载...');
  }

  },


  props: {
    id: {
      type: Number
    }
  },

  watch:{
    id( val){
      this.initVideoDetail();
    }

  }


}
</script>
<style >
.el-badge__content.is-fixed{
  right: 0 !important;
}
</style>